<template>
	<view class="container">
		<view class="container-c">
			<!-- 用户初始信息 -->
			<view class="info" v-if="isEdit==false">
				<view class="edit" @tap="doEdit">
					修改用户信息
				</view>
				<view class="">
					<view class="item">
						<text class="left">头像</text>
						<image :src="user.icon" mode=""></image>
					</view>
					<view class="item">
						<text class="left">用户名</text>
						<text class="right">{{user.username}}</text>
					</view>
					<view class="item">
						<text class="left">昵称</text>
						<text class="right">{{user.nickname}}</text>
					</view>
					<view class="item">
						<text class="left">手机号</text>
						<text class="right">{{user.phone}}</text>
					</view>
				</view>
				<view @tap="goLog" class="login">
					退出登录
				</view>
			</view>
			<!-- 修改用户信息 -->
			<view class="editinfo" v-else>
				<view class="edit" @tap="doEdit">
					修改用户信息
				</view>
				<form @submit="formSubmit" @reset="formReset">
					<view class="item">
						<text class="left">头像</text>
						<view class="upbtn" @tap="upAvatar">
							上传头像
						</view>
					</view>
					<view class="item">
						<text class="left">用户名</text>
						<input type="text" :value="`${user.username}`" name="username" />
					</view>
					<view class="item">
						<text class="left">昵称</text>
						<input type="text" :value="`${user.nickname}`" name="nickname" />
					</view>
					<view class="item">
						<text class="left">手机号</text>
						<input type="text" :value="`${user.phone}`" name="phone" />
					</view>
					<button formType="submit" class="login" type="default">更新</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from "@/api/baseUrl.js";
	import {updateMemberInfo,uploadAvatar} from "@/api/user/login/index.js"
	export default {
		data() {
			return {
				user: {},
				isEdit: false,
				avatar: "",
			};
		},
		onShow() {
			console.log(uni.getStorageSync("userInfo"))
			this.user = uni.getStorageSync("userInfo")

		},
		methods: {
			goLog() {
				uni.removeStorageSync("token");
				uni.navigateTo({
					url: "/pages/mine/login/login"
				})
			},
			doEdit() {
				this.isEdit = true
			},
			formSubmit(e){
				console.log(this.avatar)
				var params=e.detail.value;
				var obj = {
					phone: params.phone,
					username: params.username,
					nickname: params.nickname,
					icon:this.avatar
				}
				updateMemberInfo(obj).then(res=>{
					console.log(res)
				})
				},
			upAvatar(){
				var _this = this;
				uni.chooseImage({
					count:1,
					success(res) {
						console.log(res)
						uploadAvatar({
							file:res.tempFilePaths[0]
						}).then(res=>{
							console.log(res)
						})
						uni.uploadFile({
							url:baseUrl+"/lejuClient/login/uploadAvatar",
							filePath:res.tempFilePaths[0],
							name:"file",
							success(result){
								// console.log(result)
								var obj = {};
								obj = JSON.parse(result.data);
								// console.log(obj);
								_this.avatar = obj.data.fileUrl;
								// console.log(_this.avatar)
								
							}
							
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
		padding-top: 30rpx;

	}

	.container-c {
		width: 650rpx;
		margin: 0 auto;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #e5e5e5;
		padding: 10rpx 30rpx;
		line-height: 94rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		text {
			font-size: 32rpx;
		}

		.right {
			color: #a1a1a1;
		}

		.left {
			color: #494949;
		}
	}

	.edit {
		width: 224rpx;
		height: 60rpx;
		border: 2rpx solid rgba(0, 0, 0, .2);
		border-radius: 15rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		margin: 30rpx 0 30rpx 400rpx;
	}
	.upbtn{
		width: 172rpx;
		height: 60rpx;
		border: 2rpx solid rgba(0, 0, 0, .2);
		border-radius: 15rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		}
	.login {
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
		width: 370rpx;
		height: 88rpx;
		border-radius: 10rpx;
		background-color: #354e44;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 300rpx;
	}
</style>
